<template>
	<view class="flex-col page">

		<view class="flex-col group" style="flex-shrink:0;">
			<view class="justify-center group_1" style="flex-shrink:0;">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615651288038.png"
					class="image_1" />
				<text
					class="text">{{ order_status == 0 ? '等待买家付款' : order_status == 1 ? '等待达人确认' : order_status == 2 ? '待服务' : order_status == 3 ? '服务进行中' : order_status == 4 ? '已完成订单' : order_status == 5 ? '待评价订单' : '已取消订单' }}</text>
			</view>
			<text class="text_1" v-if="end_t !=='已过期'">剩{{ end_t }}自动关闭</text>
			<text class="text_1" v-if="end_t =='已过期'">已过期</text>
		</view>
		<view class="flex-col group_2" style="flex-shrink:0;">
			<view class="justify-between group_3">
				<view class="left-text-wrapper flex-col view" :class="{'select-active':teps==3}">
					<text class="text_2">达人出发</text>
				</view>
				<view class="left-text-wrapper flex-col" :class="{'select-active':teps==5}">
					<text class="text_2">开始服务</text>
				</view>
			</view>
			<view class="center-group justify-center view_2">
				<!-- <view class="flex-col items-center section_1">
					<view class="flex-col items-center text-wrapper">
					</view>
				</view> -->
				<view class="section_3 view_3 " :class="{'select-active':teps==1}">
					<view class="flex-col items-center text-wrapper" v-show="teps==1">
					</view>
				</view>
				<view class="section_2"> </view>
				<view class="section_3 view_3" :class="{'select-active':teps==2}">
					<view class="flex-col items-center text-wrapper" v-show="teps==2">
					</view>
				</view>
				<image
					src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844976579604976.png"
					class="image_2" />
				<view class="section_3" :class="{'select-active':teps==4}">
					<view class="flex-col items-center text-wrapper" v-show="teps==4">
					</view>
				</view>
				<image
					src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844976577539029.png"
					class="image_3" />
				<view class="section_3" :class="{'select-active':teps==6}">
					<view class="flex-col items-center text-wrapper" v-show="teps==6">
					</view>
				</view>
			</view>
			<view class="justify-between steps-text">
				<view class="flex-row">
					<text class="text_6" :class="{'text-active':teps==1}">下单</text>
					<text class="text_7" :class="{'text-active':teps==2}">接单</text>
				</view>
				<view class="flex-row group_6">
					<text :class="{'text-active':teps==4}">达人到达</text>

				</view>
				<view class="flex-row group_6">

					<text class="text_9" :class="{'text-active':teps==6}">服务完成</text>
				</view>
			</view>
		</view>
		<view class="flex-col group_7" style="flex-shrink:0;">
			<view class="justify-center group_8" style="flex-shrink:0;">
				<view class="flex-col items-center text-wrapper_1" @click="hide">
					<text>取消订单</text>
				</view>
				<view class="flex-col items-center text-wrapper_2" @click="show" v-if="order_status == 0">
					<text>立即支付</text>
				</view>
			</view>
			<view class="flex-col section_4" style="flex-shrink:0;">
				<view class="flex-col" style="flex-shrink:0;">
					<view class="flex-row group_10">
						<view class="section_5"> </view>
						<text class="text_12">服务项目</text>
					</view>
					<view class="flex-row group_11" style="flex-shrink:0;">
						<view class="flex-col section_6" :style="{'backgroundImage': `url(${cover})`}">
							<view class="flex-col text-wrapper_3" v-if="false">
								<text class="text_13">环境疲劳·激活能量</text>
							</view>
						</view>
						<view class="flex-col group_12">
							<text class="text_14">{{ name }}</text>
							<view class="group_13">
								<text class="text_15">￥</text>
								<text class="text_16">{{ pay_money }}</text>
							</view>
							<view class="center-group flex-row view_6">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844603803770493.png"
									class="image_4" />
								<text class="text_17">时长{{ duration }}分钟</text>
							</view>
							<text class="text_18">服务时间：{{ appointment_time }}</text>
						</view>
					</view>
				</view>
				<view class="flex-col group_14">
					<view class="justify-between">
						<text class="text_19">出行交通费用</text>
						<text class="text_20">￥{{ fare }}</text>
					</view>
					<view class="justify-between group_16">
						<text class="text_21">优惠券</text>
						<text class="text_22">-￥{{ discount }}</text>
					</view>
				</view>
				<view class="flex-col group_17">
					<view class="divider"> </view>
					<view class="group_18 justify-between">
						<view class="flex-row">
							<image :src="avatar" class="image_5" />
							<view class="flex-col group_20">
								<view class="flex-row">
									<text class="text_23">{{ realname }}</text>
									<view class="flex-col items-end group_22">
										<view class="flex-col items-center text-wrapper_4">
											<text>认证</text>
										</view>
										<image
											src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844795953096993.png"
											class="image_6" />
									</view>
								</view>
								<view class="flex-row group_23">
									<!--  -->
									<u-icon v-for="(sitem,sindex) in parseInt(praise)" :key="sindex" name="star-fill"
										size="12" color="rgba(243, 151, 53, 1)"></u-icon>

									<text class="text_25">好评{{ praise }}分</text>
								</view>
							</view>
						</view>
						<view class="flex-col items-center text-wrapper_5" @click="call">
							<text>联系达人</text>
						</view>
					</view>
					<view class="divider"> </view>
				</view>
				<view class="group_18 flex-col">
					<view class="flex-row">
						<text class="text_27">{{ user_realname }}</text>
						<text class="text_28">{{ user_mobile }}</text>
					</view>
					<text class="text_29">{{ province }}{{ city }}{{ district }}{{ address }}</text>
				</view>
				<view class="flex-col">
					<view class="divider"> </view>
					<view class="group_18 flex-col">
						<view class="justify-between">
							<text class="text_30">实付款(含运费)</text>
							<view class="group_27">
								<text class="text_31">￥</text>
								<text class="text_32">{{ total_money }}</text>
							</view>
						</view>
						<view class="justify-between group_28">
							<text class="text_33">商品总额</text>
							<text class="text_34">￥{{ pay_money }}</text>
						</view>
						<view class="justify-between group_29">
							<text class="text_35">运费</text>
							<text class="text_36">￥{{ fare }}</text>
						</view>
					</view>
				</view>
				<view class="flex-col">
					<view class="divider"> </view>
					<view class="group_18 flex-col">
						<view class="justify-between">
							<text class="text_30">订单信息</text>

						</view>
						<view class="justify-between group_28">
							<text class="text_33">订单编号</text>
							<text class="text_34">{{ order_sn }}</text>
						</view>
						<view class="justify-between group_29">
							<text class="text_35">下单时间</text>
							<text class="text_36">{{ create_time }}</text>
						</view>
					</view>
				</view>
				<view class="divider"> </view>
				<view class="flex-col group_30">
					<text class="text_37">下单须知</text>
					<text
						class="text_38">1、用户付款下单后，30分钟内平台确认是否接单，下单时间如果不在营业时间内，平台再次日上班后60分钟内接单。<br /><br />2、商家已确认接单后，在商家营业时间内、离约定时间2小时之前，用户申请退款的，商家应予以100%退款。<br /><br />3、商家已确认接单后，商家单方面再取消订单或在未事先取得用户同意的情况下超过约定时间2小时仍未上门的，均视为商家爽约。用户申请退款时，若尚未开始服务商家须将已付款项予以100%退款，并过到位平台向用户另行赔付30元爽约金。<br /></text>
				</view>
				<text class="text_39">按时服务 | 质量保证 | 服务专业 | 条件退款</text>
				<view class="flex-col items-center text-wrapper_6" @click="calltel">
					<text>联系客服</text>
				</view>
			</view>
		</view>

		<zPay ref="pay" :money="pay_money" :balance="balance" @pay="pay"></zPay>
	</view>
</template>

<script>
	import zPay from '@/components/z-pay/index.vue';
	import {
		pay
	} from '@/config/utils'
	export default {
		data() {
			return {
				teps: 1, //步骤
				order_sn: '',
				"id": 12,
				"pay_money": "",
				"order_status": 0,
				"appointment_time": "",
				"fare": "",
				"discount": "",
				"refund": null,
				"total_money": "",
				"create_time": "",
				"name": "",
				"duration": 60,
				"cover": "",
				"nickname": "",
				"realname": "",
				"praise": 0,
				"avatar": "",
				"end_t": '',
				balance: 0,
				technician_mobile: "",
				mobiles: ''
			};
		},
		onLoad(options) {
			let {
				order_sn
			} = options;
			this.order_sn = order_sn;
			this.init();

		},
		components: {
			zPay
		},
		methods: {
			async init() {
				// 获取客服信息 api/user/customerService
				this.$http.post('api/user/customerService').then(res => {
					console.log(res, 'xxxx')
					let {
						mobile
					} = res;
					this.mobiles = mobile;
				})
				// 获取余额
				this.$http.post('api/user/userInfo').then(res => {
					this.balance = res.balance;
				})
				let data = await this.$http.post('api/order/orderDetails', {
					order_sn: this.order_sn
				});
				console.log(data, 'xxxx')
				for (let i in data) {
					this[i] = data[i];
				}
				this.teps = this.order_status == 0 ? 1 : this.order_status == 1 ? 2 : this.order_status == 2 ? 3 : this
					.order_status == 3 ? 5 : 6;
				this.end_t = this.showtime(this.appointment_time);
				let timer = null;
				if (this.end_t !== '已过期') {
					timer = setInterval(() => {
						if (this.end_t === '已过期') {
							clearInterval(timer);
							return;
						}
						this.end_t = this.showtime(this.appointment_time)
					}, 1000)
				}
			},
			call() {
				if (this.technician_mobile) {
					uni.makePhoneCall({
						phoneNumber: this.technician_mobile
					});
					return;
				}
				uni.showToast({
					icon: 'none',
					title: '该达人暂无号码'
				})
			},
			calltel() {
				if (this.mobiles) {
					uni.showModal({
						content: '是否拨打客服电话',
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.mobiles
								});
							}
						}
					})
					return;
				}
				uni.showToast({
					icon: 'none',
					title: '暂无客服联系号码'
				})
			},
			add0(a) {
				a = Number(a)
				return a < 10 ? '0' + a : a;
			},
			showtime(endtime) {
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(endtime.replace(/-/g, '/')); //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
				if (lefttime <= 0) {
					return '已过期'
				}
				return this.add0(leftd) + "天" + this.add0(lefth) + ":" + this.add0(leftm) + ":" + this.add0(
					lefts); //返回倒计时的字符串
			},
			hide() {
				uni.showModal({
					content: '是否确认取消该订单？',
					success: (res) => {
						let {
							confirm
						} = res;
						if (confirm) {
							this.$http.post('api/order/cancelOrder', {
								order_sn: this.order_sn
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '取消成功'
								});
								this.init();
							})
						}
					}
				})
			},
			show() {
				this.$refs.pay.showPopup = true;
			},
			fill(a) {
				return 10 > a ? '0' + (0 | a) : a
			},
			async pay(e) {
				let {
					pay_way,
					pay_type
				} = e;
				let info = await this.$http.post('api/pay/pay', {
					order_sn: this.order_sn,
					pay_way,
					form: 'order'
				});
				let date = new Date();
				let create_time = date.getFullYear() + '-' + this.fill(Number(date.getMonth()) + 1) + '-' + this.fill(
						date.getDate()) + this.fill(date.getHours()) + ':' + this.fill(date.getMinutes()) + ':' + this
					.fill(date.getDate());

				uni.setStorageSync('order_info', {
					create_time,
					order_sn: this.order_sn,
					pay_type,
					pay_money: this.pay_money
				})
				if (pay_way !== 1) {
					pay(info, pay_way === 2 ? 'wxpay' : 'alipay').then(res => {
						uni.navigateTo({
							url: '/bundle/pages/pay_success/pay_success'
						})
					});
					return;
				} else {
					uni.navigateTo({
						url: '/bundle/pages/pay_success/pay_success'
					})
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 0rpx 32rpx 100rpx;
		background-color: #f8f8f8;
		background-image: linear-gradient(169.4deg,
				rgb(49, 208, 129) 0%,
				rgb(49, 208, 129) -6.14%,
				rgb(24, 181, 103) 111.55%,
				rgb(24, 181, 103) 100%);
		// overflow-y: auto;

		.image {
			margin-left: 16rpx;
			width: 16rpx;
			height: 28rpx;
		}

		.group {
			margin-top: 50rpx;

			.group_1 {
				color: rgb(255, 255, 255);
				font-size: 40rpx;
				line-height: 48rpx;
				white-space: nowrap;

				.image_1 {
					margin: 6rpx 0;
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					margin-left: 16rpx;
				}
			}

			.text_1 {
				margin-top: 12rpx;
				align-self: center;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}
		}

		.group_2 {
			margin-top: 56rpx;

			// padding-left: 28rpx;
			.steps-text {
				padding-top: 10rpx;
			}

			.group_3 {
				padding: 0 110rpx;
				color: rgb(24, 181, 103);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.left-text-wrapper {
					padding: 6rpx 0 12rpx;
					background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615701279305.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					height: 52rpx;

					.text_2 {
						margin: 0 12rpx;
					}

					&.select-active {
						background-image: url('../../static/teps-2.png');

					}
				}

				.view {
					margin-left: 115rpx;
				}
			}

			.view_2 {
				color: rgb(24, 181, 103);
				font-size: 24rpx;
				line-height: 26rpx;
				white-space: nowrap;
			}

			.group_6 {
				color: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.text-active {
					color: rgb(255, 255, 255);
				}

				.text_9 {}
			}

			.text_6 {
				color: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				margin-left: 30rpx;

				&.text-active {
					color: rgb(255, 255, 255);
				}
			}

			.text_7 {
				margin-left: 66rpx;
				color: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				&.text-active {
					color: rgb(255, 255, 255);
				}
			}
		}

		.group_7 {
			margin-top: 72rpx;

			.group_8 {
				padding: 0 118rpx;

				.text-wrapper_1 {
					padding: 10rpx 0;
					color: rgb(255, 255, 255);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					border-radius: 32rpx;
					width: 200rpx;
					height: 64rpx;
					border: solid 2rpx rgb(255, 255, 255);
				}

				.text-wrapper_2 {
					margin-left: 48rpx;
					padding: 12rpx 0;
					color: rgb(24, 181, 103);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					background-image: linear-gradient(104.7deg,
							rgb(255, 255, 255) 0%,
							rgb(255, 255, 255) -10.51%,
							rgb(183, 255, 219) 114.74%,
							rgb(183, 255, 219) 100%);
					box-shadow: 4rpx 8rpx 12rpx 0px rgb(5, 139, 72);
					border-radius: 32rpx;
					width: 200rpx;
					height: 64rpx;
				}
			}

			.section_4 {
				margin-top: 48rpx;
				padding: 24rpx 22rpx 40rpx 24rpx;
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615594288627.png');
				background-position: 0px 0px;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.group_14 {
					margin-top: 40rpx;

					.group_16 {
						margin-top: 16rpx;

						.text_21 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_22 {
							color: rgb(102, 102, 102);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.text_19 {
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_20 {
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}
				}

				.group_17 {
					margin-top: 38rpx;
				}

				.group_30 {
					margin-top: 40rpx;

					.text_37 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.text_38 {
						margin: 24rpx 6rpx 0 4rpx;
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						line-height: 34rpx;
						text-align: left;
					}
				}

				.text_39 {
					margin-top: 38rpx;
					align-self: center;
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}

				.text-wrapper_6 {
					margin-top: 38rpx;
					padding: 6rpx 0;
					align-self: center;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					border-radius: 28rpx;
					width: 176rpx;
					border: solid 2rpx rgb(228, 228, 228);
				}

				.group_10 {
					color: rgb(0, 0, 0);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;

					.section_5 {
						margin: 6rpx 0;
						background-color: rgb(24, 181, 103);
						border-radius: 4rpx;
						width: 8rpx;
						height: 32rpx;
					}

					.text_12 {
						margin-left: 16rpx;
					}
				}

				.group_11 {
					margin-top: 24rpx;

					.section_6 {
						padding-top: 140rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
						border-radius: 12rpx;
						// background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615922897731.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						width: 230rpx;
						height: 196rpx;

						.text-wrapper_3 {
							padding: 10rpx 0 12rpx;
							background-color: rgba(0, 0, 0, 0.36);
							border-radius: 0px 0px 12rpx 12rpx;

							.text_13 {
								margin-left: 14rpx;
								margin-right: 12rpx;
							}
						}
					}

					.group_12 {
						margin-left: 24rpx;
						margin-right: 40rpx;
						flex: 1 1 auto;

						.text_14 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
							white-space: nowrap;
						}

						.group_13 {
							margin-top: 8rpx;
							white-space: nowrap;

							.text_15 {
								color: rgb(243, 151, 53);
								font-size: 24rpx;
								line-height: 28rpx;
							}

							.text_16 {
								color: rgb(243, 151, 53);
								font-size: 40rpx;
								line-height: 48rpx;
							}
						}

						.view_6 {
							margin-top: 20rpx;
							color: rgb(102, 102, 102);
							font-size: 24rpx;
							line-height: 34rpx;
							white-space: nowrap;
						}

						.text_18 {
							margin-top: 8rpx;
							color: rgb(153, 153, 153);
							font-size: 24rpx;
							line-height: 34rpx;
							white-space: nowrap;
						}
					}
				}

				.group_18 {
					padding: 40rpx 0 38rpx;

					.text_29 {
						margin-top: 8rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text-wrapper_5 {
						padding: 8rpx 0;
						align-self: center;
						color: rgb(255, 255, 255);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
						background-color: rgb(24, 181, 103);
						border-radius: 28rpx;
						width: 160rpx;
						height: 56rpx;
					}

					.text_27 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.text_28 {
						margin-left: 16rpx;
						margin-top: 4rpx;
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.group_28 {
						margin-top: 16rpx;

						.text_33 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_34 {
							color: rgb(102, 102, 102);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.group_29 {
						margin-top: 16rpx;

						.text_35 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_36 {
							color: rgb(102, 102, 102);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.image_5 {
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
					}

					.group_20 {
						margin-left: 24rpx;

						.group_23 {
							margin-top: 6rpx;
							color: rgb(153, 153, 153);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;

							.image_7 {
								width: 80rpx;
								height: 24rpx;
							}

							.image_8 {
								margin-left: 4rpx;
								width: 52rpx;
								height: 24rpx;
							}

							.text_25 {
								margin-left: 8rpx;
							}
						}

						.text_23 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
							white-space: nowrap;
						}

						.group_22 {
							margin: 4rpx 0 4rpx 8rpx;
							padding: 2rpx 0;
							color: rgb(255, 255, 255);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;
							width: 90rpx;
							position: relative;

							.text-wrapper_4 {
								padding: 2rpx 0;
								background-color: rgb(243, 151, 53);
								border-radius: 16rpx;
								width: 78rpx;
							}

							.image_6 {
								border-radius: 50%;
								width: 36rpx;
								height: 36rpx;
								position: absolute;
								left: 0;
								bottom: 0;
							}
						}
					}

					.text_30 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.group_27 {
						white-space: nowrap;
						height: 44rpx;

						.text_31 {
							color: rgb(0, 0, 0);
							font-size: 24rpx;
							font-weight: 500;
							line-height: 34rpx;
						}

						.text_32 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
						}
					}
				}

				.divider {
					margin-left: 4rpx;
					background-image: repeating-linear-gradient(90deg,
							rgb(228, 228, 228),
							rgb(228, 228, 228) 1.2618296529968454%,
							transparent 1.2618296529968454%,
							transparent 2.5236593059936907%);
					height: 2rpx;
				}
			}
		}

		.center-group {
			padding: 0 4rpx;

			.section_1 {
				padding: 8rpx 0;
				background-color: rgba(255, 255, 255, 0.45);
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;

				.text-wrapper {
					height: 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50%;
					width: 32rpx;
				}
			}

			.section_2 {
				margin-left: 6rpx;
				align-self: center;
				background-color: rgba(255, 255, 255, 0.45);
				border-radius: 2rpx;
				width: 70rpx;
				height: 4rpx;

			}

			.section_3 {
				margin-left: 14rpx;
				align-self: center;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 50%;
				width: 24rpx;
				height: 24rpx;

				&.select-active {
					padding: 8rpx 8rpx;
					width: 48rpx;
					height: 48rpx;
				}

				.text-wrapper {
					height: 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50%;
					width: 32rpx;
				}
			}

			.view_3 {
				margin-left: 10rpx;
			}

			.image_2 {
				margin-left: 10rpx;
				align-self: center;
				width: 178rpx;
				height: 16rpx;
			}

			.image_3 {
				margin-left: 14rpx;
				align-self: center;
				width: 174rpx;
				height: 16rpx;
			}

			.image_4 {
				margin: 6rpx 0 4rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.text_17 {
				margin-left: 8rpx;
			}
		}
	}

	.select-active {}
</style>